<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="webkit|ie-copm|ie-stand" name="renderer"/>
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>
<title>梦享科技题库</title>
<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet"/>
<link href="__PUBLIC__/css/style.css" rel="stylesheet"/>
<link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet"/>
<!--[if lt IE 9]>
	<link href="css/font-awesome-ie7.min.css" rel="stylesheet"/>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
<![endif]-->
<script src="__PUBLIC__/js/respond.js"></script>
		
</head>
<body>
<div class="banner">
	<div class="wriper">
		<div class="logo"><img class="img1" src="__PUBLIC__/img/logo.png"/></div>
	</div>
</div>
<div class="wriper" style="min-height:85.2%;">
	<div class="title2">
		<span>梦享科技题库</span>
		<span>></span>
		<span>{$name.name}</span>
		<div class="lxftime" style="float:right;color:red;" endtime="6/6/2016 0:0:5" lxfday="no"></div>
	</div>
	<div class="content1 question1">
		<h2><i class="fa fa-question-circle"></i>[填空题]</h2>
		<div class="wriper-1">
			<form>

			<input type="hidden" value='' id="input_q_id">
				<div class="question-1"></div>
				<div class="question-2">
					
					<textarea placeholder="请在这里写出您的答案" id="answer_content" class="form-control" rows="7"></textarea>
				</div>
			
			<div class="question-btn">
				<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#myModal">提前交卷</button>
				<button class="btn btn-success" id="next_question" id="next_question" onclick="nextQuestion()"  type="button">下一题</button>
			</div>
			</form>
		</div>
		<div class="answer-card">
			<div class="answer-card-title">
				<span>收起答题卡</span>
				<i class="fa fa-angle-up"></i>
			</div>
			<ul style="height:50px;">
                <for start="0" end="$count">
                 <li><a href ="##" id="li-a-hover-{$i}" onclick="showQuestion({$i})">{$i+1}</a><li>
                </for>
			</ul>
		</div>
	</div>
</div>
<!-- Button trigger modal -->

<!-- Modal 弹出框，询问是否要提前交卷 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body" style="text-align:center;font-size:18px;">
        <i class="fa fa-warning" style="font-size:25px;color:#FF652F;margin-right:10px;"></i>
		<span>你尚未完成本次测评，确定要提前交卷？</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
<div class="foot">
	<p class="p1">梦享科技</p>
	<p><a href="http://www.miibeian.gov.cn/">© 2015-8 IDDO.</a> All rights resevered</p>
	<p><a href="http://memxiang.com">梦享科技</a>  版权所有</p>
</div>
<script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>
<script src="__PUBLIC__/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/js.js"></script>
<script src="__PUBLIC__/js/countdown.js"></script>
     <script  type="text/javascript">
            var questionList = {$list};
            var length = questionList.length;
            $(function() {
                //默认设置为第一题
                showQuestion(0);
                 $(".btn-primary").click(function(){
                     window.location.href = '__APP__'+"/Home/End/index.html";
                 });
            });
           
            /**
             * 显示题库
             * @param {type} n
             * @returns {undefined}
             */
            function showQuestion(n) {
                var question = questionList[n];
                m = n;
                $("#input_q_id").val(question.q_id);
                $(".question-1").html(question.q_content);
                $("#li-a-hover-"+n).addClass('answer-card-hover');
                for(var i = 0;i<length;i++){
                    if(i!==m){
                         $("#li-a-hover-"+i).removeClass('answer-card-hover')
                    }
                }
                //清除选择

                $('#answer_content').val("");
                $("input[type=radio]").removeAttr("checked");
            }
           /**
             * 下一题
             */
            var m = 0;
            function nextQuestion(){
                //检测是否选择，如果没有先提示先选择
                var answer = $('#answer_content').val();
                if(answer.length == 0){
                    alert("请填写答案");
                    return;
                }
                m++;
                answerQuestion(); //提交答案
                if(m>=length){
                    alert("已经是最后一道题");
                   
                    //自动提交试卷中
                    window.location.href = '__APP__'+"/Home/End/index.html";
                    return;
                }
            }
            /**
             * 回答问题
             */            
            function answerQuestion(){
                //获取选中的值
                //$(".choose-active").each(function(n,k){
           /*         if($(this).hasClass("choose-active")){
                      var radio = $(this).children().children("input[type=radio]");*/
                       $.ajax({
                           url:'__APP__'+"/Home/questions/answer2",
                           dataType:'json',
                           data:{
                               "answer":$('#answer_content').val(),
                               'question':$("#input_q_id").val()
                           },
                           success:function(data){
                               if(data.success==1){
                                    showQuestion(m);  
                               }else{
                                   alert("服务器错误");
                                 }
                           }
                       });
               // });
            }


        </script>
</body>
</html>